import React, { useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { Button, Checkbox, Form, Input,Card, message } from "antd";
import style from '../index.module.css'
import {addHospitalRequest,getHosSetFromIdRequest,updateHosSetFromIdRequest} from '@api/hospital/hospitalSet';
import type {addHospitalParamType} from '@api/hospital/model/hospitalSetTypes'

export default function AddOrUpdateHosSet() {
    const navigate=useNavigate();

     //通过Form组件上的一个useForm方法,可以创建实例,然后在某一个Form组件上添加一个form属性,值为当前实例,那么Form表单和当前的form实例就关联起来了
     const [form]=Form.useForm()
     
    const {id}=useParams();
    console.log(id,'iddddd');

    useEffect(()=>{
         //因为组件复用，在新增医院的时候不需要刚进入就发送请求,所以我们要判断当前是否有id
         if(id){
            const getHosDetail=async()=>{
                // 发送请求
                const result=await getHosSetFromIdRequest(id);
                console.log(result,'result');
                
                 //Form实例上有一个setFieldsValue方法,可以把一个对象的值通过key和表单的name一一对应的形式添加到表单里
                 form.setFieldsValue(result)
             }
             getHosDetail();

         }
    })
    
    // 1.新增医院的事件回调函数
    const addHosFinishHandle=async(fieldValue:addHospitalParamType)=>{
        if(!id){
            //发送新增请求
        await addHospitalRequest(fieldValue)
        //新增成功以后返回医院设置页面
        navigate("/syt/hospital/hospitalSet")

        message.success('新增数据成功')
        } else{
            updateHosSetFromIdRequest({...fieldValue,id})
            //修改成功以后返回医院设置页面
            navigate("/syt/hospital/hospitalSet")
            message.success('修改数据成功')
        }
    }

    // /2.点击返回事件回调函数
    const goBackHandle=()=>{
        navigate(-1)
    }
    
    
  return (
    <div>
        <Card>
      <Form 
      form={form}
      name="basic" 
      labelCol={{ span: 3 }} 
      wrapperCol={{ span: 18 }}
      onFinish={addHosFinishHandle}
      >
        <Form.Item 
        label="医院名称"
        name="hosname"
        rules={[
            {
                required:true,// 必填项
                message:'请输入医院名称',
                transform(value){
                  return value.trim()
                }
            }
        ]}
        >
            
          <Input />
        </Form.Item>

        <Form.Item 
        label="医院编号" 
        name="hoscode"
        rules={[{ required: true, message: '请输入医院编号' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item 
        label="api基础路径" 
        name="apiUrl"
        rules={[{ required: true, message: '请输入api基础路径' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item 
        label="联系人姓名" 
        name="contactsName"
        rules={[{ required: true, message: '请输入联系人姓名' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item 
        label="联系人手机" 
        name="contactsPhone"
        rules={[{ required: true, message: '请输入联系人手机' }]}
        >
          <Input />
        </Form.Item>

        

        <Form.Item wrapperCol={{ offset: 3 }}>
          <Button  className={style.mr} type="primary" htmlType="submit">
            提交
          </Button>
          <Button onClick={goBackHandle} type="default" htmlType="button">
            返回
          </Button>
        </Form.Item>
      </Form>
      </Card>
    </div>
  );
}
